<template>
  <div>
      <!-- 面包屑导航 -->
      <div class ='breadcrumb'>
    <el-breadcrumb separator="/" class="drag-title">
      <el-breadcrumb-item class="drag-item1"> <el-icon><alarm-clock /></el-icon>拖拽组件</el-breadcrumb-item>
      <el-breadcrumb-item>拖拽列表</el-breadcrumb-item>
    </el-breadcrumb>
     </div>

    <div class="content">
            <!-- 第一个拖拽框 -->
            <div class="first">
                <div style="text-align:center; font-size:20px">todo</div>
           <draggable
           v-model="todo"
           @remove="removeHandle"
            :animation="200"
           :scroll="true"
           :group='{name:"sortlist"}'
            ghost-class='lala'
           >
           <template #item="{element}">
               <transition-group tag="div"  id="todo" >
                 
                  <div :key="element.id" class="drag-list"> {{element.content}}</div>
                  
               </transition-group>
          </template>

           </draggable>
            </div>

            <!-- 第二个拖拽框 -->
            <div class="second">
                <div style="text-align:center; font-size:20px">doing</div>
                <draggable
                    v-model="doing"
                    @remove="reomoveHandle"
                    :animation ="200"
                    :scroll="true"
                    :group='{name:"sortlist"}'
                    
                >
                <template #item="{element}">
                        <transition-group tag="div" id="doing">
                            <div :key="element.id" class="drag-list">
                                {{element.content}}
                            </div>
                        </transition-group>
                </template>

                    </draggable>
            </div>


    <!-- 第三个拖拽框 -->
            <div class="third">
                <div style="text-align:center; font-size:20px" >done</div>
            <draggable
                :group="{name:'sortlist'}"
                :animation="200"
                @remove="removeHandle"
                :scorll="true"
                :ghostClass="lala"
                v-model="done"
            >
                        <template #item="{element}">
                                <transition-group  tag="div" id="done">
                                    <div :key="element.id" class="drag-list">{{element.content}}</div>
                                </transition-group>
                        </template>
                </draggable>
            </div>
    </div>
    
  </div>
</template>

<script setup>
//  vue3.0  使用 vuedraggable的 时候使用  vyedraggable 版本要是4.xx 的

import draggable from 'vuedraggable'
import { reactive,toRefs} from 'vue'

const  removeHandle =()=>{
    console.log(123);
}

let data =reactive({
    todo: [
    {
        id: 1,
        content: '开发图表组件'
    },
    {
        id: 2,
        content: '开发拖拽组件'
    },
    {
        id: 3,
        content: '开发权限测试组件'
    }
],
doing: [
    {
        id: 1,
        content: '开发登录注册页面'
    },
    {
        id: 2,
        content: '开发头部组件'
    },
    {
        id: 3,
        content: '开发表格相关组件'
    },
    {
        id: 4,
        content: '开发表单相关组件'
    }
],
done:[
    {
        id: 1,
        content: '初始化项目，生成工程目录，完成相关配置'
    },
    {
        id: 2,
        content: '开发项目整体框架'
    }
],

})
// 通过解构赋值的方法 来 获取 reactive 中的数据
const {todo, doing,done} = toRefs(data)

</script>

<style scoped>
.lala{
    color: red;
    font-size: 30px;
    background-color: red !important;;
}
.drag-list{
    width: 100%;
    height: 50px;
    margin: 10px 0 ;
    background-color:#F0F0F0;
    text-align: center;
    line-height: 50px;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    user-select: none;
    overflow: hidden;
    -webkit-box-orient: vertical;

}
.el-icon{
    vertical-align: bottom;
    margin: 0 5px;
}
.content{
    width: 80%;
    margin:40px 0 ;
    height: 500px;
    display: flex;
    justify-content: space-around;
}
.first ,.second,.third{
    background-color: #FFFFFF;
    width:300px;
    padding:10px;
    box-sizing: border-box;
    
}

</style>